<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 14 - Masking</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.js"></script>
</head>
<body>
<script>
var stage0 = new PIXI.Stage(0x66FF99);
var rendererType=1;
var addMask = true;
var renderer = null;
if(rendererType==0)
{
renderer = new PIXI.CanvasRenderer(800, 600, null, false);
}
else
{
renderer = PIXI.autoDetectRenderer(800, 600, null, false);
}
document.body.appendChild(renderer.view);
var container0= new PIXI.DisplayObjectContainer();
stage0.addChild(container0);
if(addMask)
{
var clippingMask0 = new PIXI.Graphics();
clippingMask0.beginFill();
clippingMask0.drawRect(0, 0, 200, 300);
clippingMask0.endFill();
container0.mask = clippingMask0;
container0.addChild(clippingMask0);
}
var texture0 = PIXI.Texture.fromImage("http://www.goodboydigital.com/pixijs/examples/14/panda.png");
var sprite0 = new PIXI.Sprite(texture0);
container0.addChild(sprite0);
var fltr = new PIXI.filters.GrayFilter();
sprite0.filters = [fltr];
requestAnimationFrame(animate);
function animate() {
requestAnimationFrame(animate);
renderer.render(stage0);
}
</script>
</body>
</html>
